<template>
	<div class="goodsItem">
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="handleGoodsDataClose"
			:dialogFooterBtn="true"
		>
			<section class="custom-dialog-body order-detail">
				<main>
					<div class="warm-tip mb16">
						温馨提示: <br />1、如果无法发货，请及时与买家联系并说明情况后主动退款；
						<br />2、买家申请售后，须征得买家同意后发货，否则买家有权拒收货物；
						<br />3、订单全部退款将会退回商品库存，并且减少实际销量，订单商品上的主动退款不会退回库存和销量
					</div>
					<div class="status-content">
						<el-row :gutter="20" class="mb20">
							<el-col :span="24" class="mb20">
								<div class="name sd-flex mb6">
									<el-icon class="cursor-pointer color" @click="refreshStatus(state.data.id)"><Refresh /></el-icon>
									<span class="ml5" v-if="state.data.orderStatus == 0">待付款</span>
									<span class="ml5" v-if="state.data.orderStatus == 1">待付款</span>
									<span class="ml5" v-if="state.data.orderStatus == 2">待收货</span>
									<span class="ml5" v-if="state.data.orderStatus == 3">待评价</span>
									<span class="ml5" v-if="state.data.orderStatus == 4 || state.data.orderStatus == 5">交易完成</span>
									<span class="ml5" v-if="state.data.orderStatus == 6">申请退款中</span>
									<span class="ml5" v-if="state.data.orderStatus == 7">退款完成</span>
									<span class="ml5" v-if="state.data.orderStatus == 8">已取消</span>
									<span class="ml5" v-if="state.data.orderStatus == 9">交易关闭</span>
								</div>
								<div class="desc mb10">
									<span v-if="state.data.orderStatus == 0">等待买家付款</span>
									<span v-if="state.data.orderStatus == 1">立即发货</span>
									<span v-if="state.data.orderStatus == 2">等待买家收货，还剩5天16时33分钟自动确认</span>
									<span v-if="state.data.orderStatus == 3">等待买家评价</span>
									<span v-if="state.data.orderStatus == 4 || state.data.orderStatus == 5">交易已完成</span>
									<span v-if="state.data.orderStatus == 6">等待卖家处理退款</span>
									<span v-if="state.data.orderStatus == 7">订单退款完成</span>
									<span v-if="state.data.orderStatus == 8">买家已取消</span>
									<span v-if="state.data.orderStatus == 9">买家未在规定时间内付款</span>
								</div>
								<div class="tools mb20">
									<el-button type="primary" size="default" v-if="state.data.orderStatus == 1" @click="goodsSend">立即发货</el-button>
									<el-button size="default" v-if="state.data.payStatus != 1 && state.data.payStatus != 0">全部退款</el-button>
								</div>
								<div class="memo sd-flex">
									<div>
										<el-input v-if="executionRemarkFlag" size="small" v-model="state.data.remark"></el-input>
										<div v-else>{{ state.data.remark }}</div>
									</div>

									<div v-if="!executionRemarkFlag"></div>
									<el-button text type="primary" size="small" v-if="!executionRemarkFlag" @click="executionRemarkFlag = !executionRemarkFlag">
										<span v-if="state.data.remark != null && state.data.remark != ''"> 修改备注 </span>
										<span v-else> 添加备注 </span>
									</el-button>

									<el-button text type="primary" size="small" v-if="executionRemarkFlag" @click="updateRemark">确定</el-button>
									<el-button text type="primary" size="small" v-if="executionRemarkFlag" @click="executionRemarkFlag = !executionRemarkFlag"
										>取消
									</el-button>
								</div>
							</el-col>
							<el-col :span="24">
								<el-steps :active="active">
									<el-step>
										<template #title>
											<div>买家下单</div>
										</template>
										<template #description>
											<div>{{ state.createOrder.createTime }}</div>
											<div class="step-status">待付款</div>
										</template>
									</el-step>
									<el-step title="买家付款">
										<template #description>
											<div>{{ state.payOrder.createTime }}</div>
											<div class="step-status">待发货</div>
										</template>
									</el-step>
									<el-step title="商家发货">
										<template #description>
											<div>{{ state.sendOrder.createTime }}</div>
											<div class="step-status">待收货</div>
										</template>
									</el-step>
									<el-step title="买家收货">
										<template #description>
											<div>{{ state.receiveOrder.createTime }}</div>
											<div class="step-status">待评价</div>
										</template>
									</el-step>
									<el-step title="完成交易">
										<template #description>
											<div>{{ state.finishOrder.createTime }}</div>
										</template>
									</el-step>
								</el-steps>
							</el-col>
						</el-row>
						<el-col :span="24">
							<div class="right-item">
								<div class="label">商品总价：</div>
								<div class="content">¥{{ state.data.goodsPrice }}</div>
							</div>
							<div class="right-item">
								<div class="label">运费价格：</div>
								<div class="content">¥0.00</div>
							</div>
							<div class="right-item">
								<div class="label">实付金额：</div>
								<div class="content fee-content sd-flex">¥{{ state.data.payFee }}</div>
							</div>
						</el-col>
						<div class="remark right-item">
							<div class="label">买家留言：</div>
							<div class="content">
								<span v-if="state.data.leaveMessage != '' && state.data.leaveMessage != null">
									{{ state.data.leaveMessage }}
								</span>
								<span v-else> 暂无留言 </span>
							</div>
						</div>
					</div>
					<div class="tabs-content mb16">
						<el-tabs v-model="orderTab">
							<el-tab-pane label="订单信息" name="order">
								<el-row :gutter="20" class="mb20">
									<el-col :span="12">
										<div class="title">交易信息</div>
										<div class="item">
											<div class="label">订单编号: &nbsp;</div>
											<div class="content">{{ state.data.orderSn }}</div>
										</div>
										<div class="item">
											<div class="label">订单来源:&nbsp;</div>
											<div class="content">暂无....</div>
										</div>
									</el-col>
									<el-col :span="12">
										<div class="title">买家信息</div>
										<div class="item">
											<div class="label">买家昵称:&nbsp;</div>
											<div class="content">{{ state.data.nickname }}</div>
										</div>
									</el-col>

									<el-col :span="12">
										<div class="title">收货信息</div>
										<div class="item">
											<div class="label">收获昵称:&nbsp;</div>
											<div class="content">{{ state.data.consignee }}</div>
										</div>
										<div class="item">
											<div class="label">联系方式:&nbsp;</div>
											<div class="content">{{ state.data.mobile }}</div>
										</div>
										<div class="item">
											<div class="label">收获地址:&nbsp;</div>
											<div class="content">
												<div>{{ state.data.province }}-{{ state.data.city }}-{{ state.data.country }}</div>
												<div>
													<div>{{ state.data.address }}</div>
												</div>
											</div>
										</div>
									</el-col>
								</el-row>
							</el-tab-pane>
							<el-tab-pane label="售后信息" name="sh">123123</el-tab-pane>
						</el-tabs>
					</div>

					<div class="goods-info">
						<div class="goods-title">商品信息</div>
						<div>
							<el-table :data="state.data.goodsVOS">
								<el-table-column label="商品信息" prop="title" width="400">
									<template #default="scope">
										<div class="flex goods-item">
											<div style="width: 80px; height: 80px">
												<el-image :src="STATIC_URL + scope.row.image" />
											</div>
											<div class="right ml15">
												<div class="goods-title">
													{{ scope.row.title }}
												</div>
												<div class="goods-sku-text">
													<span v-for="(sku, index) in scope.row.skus" :key="sku" :class="{ ml5: index != 0 }"> {{ sku }} </span>
												</div>
											</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="单价(元)" width="100" prop="price"></el-table-column>
								<el-table-column label="数量(个)" width="100" prop="quantity"></el-table-column>
								<el-table-column label="支付金额(元)" width="150" prop="totalPrice"></el-table-column>
								<el-table-column label="订单类型" width="100"></el-table-column>
								<el-table-column label="发货状态" width="100"></el-table-column>
								<el-table-column label="商品评价"></el-table-column>
							</el-table>
						</div>
					</div>

					<div class="pay-info">
						<div class="pay-title">支付信息</div>
						<div>
							<el-table :data="state.data.payVOS">
								<el-table-column label="支付单号" prop="payNo" width="400"></el-table-column>
								<el-table-column label="支付方式" width="100" prop="payWay"></el-table-column>
								<el-table-column label="订单金额" width="100" prop="orderAmount"></el-table-column>
								<el-table-column label="交易单号" width="100"></el-table-column>
								<el-table-column label="支付状态" width="100" prop="payStatus"></el-table-column>
								<el-table-column label="已退款金额" width="150" prop="refund"></el-table-column>
								<el-table-column label="交易时间" prop="payTime"></el-table-column>
							</el-table>
						</div>
					</div>
				</main>
			</section>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">打印</el-button>
				</span>
			</template>
		</CustomDialog>

		<GoodsSenderDialog ref="GoodsSenderDialogRef" @refreshOrderStatus="refreshStatus"></GoodsSenderDialog>
	</div>
</template>
<script setup lang="ts">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { orderApi } from '/@/api/shop/order';
import msg from '/@/utils/messageUtils';
import { STATIC_URL } from '/@/utils/config';
import _ from 'lodash';
import { Refresh } from '@element-plus/icons-vue';
const GoodsSenderDialog = defineAsyncComponent(() => import('./GoodsSendDialog.vue'));
const GoodsSenderDialogRef = ref();
const active = ref(1);
const orderTab = ref('order');
const executionRemarkFlag = ref(false);
const state = reactive({
	data: {} as any,
	createOrder: {
		createTime: '',
	},
	payOrder: {
		createTime: '',
	},
	sendOrder: {
		createTime: '',
	},
	receiveOrder: {
		createTime: '',
	},
	finishOrder: {
		createTime: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '订单详情',
		submitTxt: '',
	},
});

const handleGoodsDataClose = () => {
	state.dialog.isShowDialog = false;
};

const onOpenDialog = async (id: string) => {
	state.dialog.isShowDialog = true;
	initData(id);
};

const initData = async (id: string) => {
	try {
		console.log('id: ' + id);
		const { data } = await orderApi().view(id);
		state.data = data;
		console.log(data);
		resolveProcess(data.statusProcessVOS);
	} catch (error) {
		msg().error('产线订单详细信息失败');
	}
};

const resolveProcess = (process: any) => {
	_.forEach(process, (e: any) => {
		switch (e.orderStatus) {
			case 0:
				state.createOrder = {
					createTime: e.createTime,
				};
				break;
			case 1:
				state.payOrder = {
					createTime: e.createTime,
				};
				active.value = 2;
				break;
			case 2:
				state.sendOrder = {
					createTime: e.createTime,
				};
				active.value = 3;
				break;
			case 3:
				state.receiveOrder = {
					createTime: e.createTime,
				};
				active.value = 4;
				break;
			case 4:
				state.finishOrder = {
					createTime: e.createTime,
				};
				active.value = 5;
				break;
		}
	});
};

const onCancel = () => {
	state.dialog.isShowDialog = false;
};

const onSubmit = () => {};

const goodsSend = () => {
	GoodsSenderDialogRef.value.openInit(state.data.id);
};

const updateRemark = async () => {
	try {
		if (_.isEmpty(state.data.remark)) {
			return;
		}
		await orderApi().remark({
			id: state.data.id,
			remark: state.data.remark,
		});

		executionRemarkFlag.value = !executionRemarkFlag.value;
	} catch (e) {
		msg().error('操作失败，请稍后重试');
	}
};

const refreshStatus = (id: string) => {
	console.log('窗口关闭刷新.....refreshStatus, id=> ', id);
	initData(id);
};

defineExpose({
	onOpenDialog,
});
</script>

<style lang="scss" scoped>
.order-detail .warm-tip {
	line-height: 16px;
	font-size: 12px;
	color: var(--sd-font);
}

.order-detail .status-content {
	border-radius: 8px;
	background: var(--sd-table-header-bg);
	padding: 20px;
}

.order-detail .status-content .remark {
	height: 32px;
	line-height: 32px;
	padding: 0 12px;
	background: var(--sd-table-striped);
	border-radius: 4px;
}

.order-detail .status-content .right-item {
	line-height: 16px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	font-size: 12px;
}

.order-detail .status-content .right .fee-content {
	height: 16px;
}

.order-detail .status-content .right-item .content {
	color: var(--sd-subtitle);
}

.order-detail .status-content .right-item .label {
	flex-shrink: 0;
	color: var(--sd-subfont);
}

.order-detail :deep(.el-tabs__content) {
	background: var(--sd-table-header-bg);
	border-radius: 8px;
	padding: 20px 20px 0;
}

.step-status {
	position: absolute;
	top: -12px;
	left: 50%;
	width: 60px;
	font-size: 16px;
}

.memo {
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	font-weight: 400;
	color: var(--sd-font);
}

.tools {
	height: 32px;
}

.desc {
	line-height: 16px;
	font-size: 12px;
	color: var(--sd-subfont);
}

.name {
	line-height: 24px;
	font-size: 18px;
	color: var(--sd-title);
	font-weight: 900;
}

.order-detail .tabs-content .title,
.goods-title,
.pay-title {
	height: 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sd-title);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.tabs-content .item .label {
	flex-shrink: 0;
	color: var(--sd-subfont);
}

.tabs-content .item .content {
	color: var(--sd-subfont);
}

.tabs-content .item {
	line-height: 24px;
	margin-bottom: 4px;
	display: flex;
	font-size: 12px;
}
.color {
	color: var(--el-color-primary);
}
</style>
